<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
		String path = request.getContextPath();
		String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%request.setCharacterEncoding("utf-8"); %>
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <!--bootstrap.min.css-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!--font-awesome.css?v=4.4.0-->
    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!--bootstrap.min.css-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!--custom.css-->
	<link rel="stylesheet" type="text/css" href="<%=basePath%>css/plugins/iCheck/custom.css"/>
	<!--style.css-->
	<link rel="stylesheet" type="text/css" href="<%=basePath%>css/style.css"/>
	<!--jquery.min.js-->
	<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
</head>
<body class="gray-bg">


	
	
	<div class="row">
	<form action="${pageContext.request.contextPath}/GoodsServlet/selectGoodsSales" id="goodsSales" method="post">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
					<div class="row">
						<div class="col-sm-2">
							<select class="form-control" name="gtype_id" id="gtype" style="height:40px;border:1px solid #1AB394">
								
							</select>
						</div>
					</div>
					<div class="table-responsive">
                        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    					<div id="main" style="width: 1200px;height:450px;"></div>
                    </div>

                </div>
            </div>
        </div>
        </form>
    </div>

<!--bootstrap.min.js-->
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--jquery.peity.min.js-->
<script src="<%=basePath%>js/plugins/peity/jquery.peity.min.js" type="text/javascript" charset="utf-8"></script>
<!--content.js-->
<script src="<%=basePath%>js/content.js" type="text/javascript" charset="utf-8"></script>
<!--icheck.min.js-->
<script src="<%=basePath%>js/plugins/iCheck/icheck.min.js" type="text/javascript" charset="utf-8"></script>
<!--peity-demo.js-->
<script src="<%=basePath%>js/demo/peity-demo.js" type="text/javascript" charset="utf-8"></script>
<!--layer.min.js-->
<script src="<%=basePath%>js/plugins/layer/layer.min.js" type="text/javascript" charset="utf-8"></script>
<!-- toastr.min.js -->
<script src="<%=basePath%>js/plugins/toastr/toastr.min.js" type="text/javascript" charset="utf-8"></script>
<!-- jquery-bootstrap-pagination.js -->
<script src="<%=basePath%>js/plugins/jquery-bootstrap-pagination/jquery-bootstrap-pagination.js" type="text/javascript" charset="utf-8"></script>
<!-- pubic.js -->
<script src="<%=basePath%>js/pubic.js" type="text/javascript" charset="utf-8"></script>
<!-- echarts.common.min.js -->
<script src="${pageContext.request.contextPath}/js/plugins/echarts/echarts.common.min.js"></script>
<script>
	//ajax动态获取商品类型并生产下拉列表
	$.get('${pageContext.request.contextPath}/GoodsServlet/gtypeList',function(data){
		var gtypeList = JSON.parse(data);
		var ops = "";
		for(var i = 0;i<gtypeList.length;i++){
			ops += "<option value="+gtypeList[i].gtype_id+">"+gtypeList[i].gtype_name+"</option>";
		}
		$('#gtype').html(ops);
	});
	  // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    $.get('${pageContext.request.contextPath}/GoodsServlet/selectGoodsSales',function (dat) {
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {},
                    magicType: {
                        type: ['bar','line']
                    },
                    restore:{}
                }
            },
            legend: {
                data: dat[0]
            },
            xAxis: {
            	 type:'category',
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                axisLabel:{
                    interval:0
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                }
            },
            series: dat[1]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option,true);
    },'json');
	
	$('#gtype').change(function(){
		  // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        $.get('${pageContext.request.contextPath}/GoodsServlet/selectGoodsSales',{"gtype_id":$(':selected').val()},function (dat) {
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {},
                        magicType: {
                            type: ['bar','line']
                        },
                        restore:{}
                    }
                },
                legend: {
                    data: dat[0]
                },
                xAxis: {
                	 type:'category',
                    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                    axisLabel:{
                        interval:0
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                series: dat[1]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option,true);
        },'json');
	});
</script>
<script>
      
    </script>
</body>
</html>